<template>
	<view class="new-task padding" style="height: 100%;">
		<u-form ref="newTaskFormRef" class="labu-inner" :model="newTaskForm" :borderBottom="false" labelPosition="top"
			label-width="100rpx">
			<u-form-item label="任务标题" prop="title">
				<u-input v-model="newTaskForm.title" placeholder="请选择输入标题" />
			</u-form-item>
			<u-form-item label="任务类型" prop="type">
				<u-input v-model="taskStatus" @click="showPopupOfHandleUserNameCascade = true" type="select"
					placeholder="请选择任务类型" />
				<u-select v-model="showPopupOfHandleUserNameCascade" :list="taskTypeOptionsList" valueName="value"
					labelName="label" @confirm="taskStatusChange"></u-select>
			</u-form-item>
			<u-form-item label="指定完成日期" prop="finishDate">
				<u-input v-model="newTaskForm.finishDate" type="select"
					@click="showPopupOfHandleUserNameCascadeTime = true" placeholder="请选择指定完成日期" />
				<u-picker mode="time" v-model="showPopupOfHandleUserNameCascadeTime" :params="params" @confirm="taskTimeChange"></u-picker>
			</u-form-item>
			<u-form-item label="任务内容" prop="content">
				<u-input v-model="newTaskForm.content" :border="true" class="u-textarea" type="textarea"
					:auto-height="true" placeholder="请选择任务内容" />
			</u-form-item>
			<u-form-item label="执行人" prop="handleUserName">
				<u-input v-model="executor" type="select" placeholder="请选择执行人"
					@click="showPopupOfHandleUserNameCascades = true" />
				<user-select v-model="showPopupOfHandleUserNameCascades" @city-change="cityChange"></user-select>
			</u-form-item>
			<u-form-item label="参与者" style="width: 100%">
				<u-input v-model="participant" placeholder="请选择参与者" type="select"
					@click="showPopupOfParticipant = true" />
				<user-select v-model="showPopupOfParticipant" @city-change="participantChange"></user-select>
			</u-form-item>
		</u-form>
		<view v-if="newTaskForm.taskFiluist.length > 0" class="form-item-appendix-list" style="margin-top: 20rpx;">
			<view v-for="(appendixItem, index) in newTaskForm.taskFiluist" :key="index" class="form-item-appendix-item">
				<view class="appendix-item-left">
					<!-- <span class="iconfont" :class="fileIconClass(appendixItem.filename)" /> -->
					<span style="margin-left: 0.5rem">{{ appendixItem.filename }}</span>
				</view>
				<view class="appendix-item-right">
					<span class="action-duete-appendix-wrapper">
						<van-icon class="action-duete-appendix" name="clear" @click="removeTaskFile(appendixItem)" />
					</span>
				</view>
			</view>
		</view>
		<view style="width: 100%;margin-top: 20rpx;">
			<view class="button-text" @click="onUpload">
				<u-icon name="file-text"></u-icon>
				<view>上传文件</view>
			</view>
			<view class="upload-tip" style="color: red">
				可上传 doc/pdf/rar 文件，且不超过 500kb
			</view>


			<l-file ref="lFile" @up-success="handleFileSuccess"></l-file>
		</view>
		<u-row class="action-row" :gutter="10" style="padding-bottom: 56px">
			<u-button type="primary" round class="action-submit" style="width: 100%;" @click="newTaskFormSubmit">
				发送
			</u-button>
		</u-row>
		
		<u-toast ref="uToast" />
		<!-- <van-popup v-model:show="showPopupOfHandleUserNameCascade" round position="bottom">
			<van-cascader v-model="newTaskForm.handleUserId" title="请选择执行人" :options="optionsOfHandleUserNameCascade"
				:fiud-names="fiudNamesOfHandleUserNameCascade" :closeable="false" @finish="onUserNameCascadeFinish" />
		</van-popup> -->
	</view>
</template>

<script>
	import {
		taskTypeOptionsList
	} from '../../constants/taskConstant.js'
	import userSelect from '../selelctUser/u-user-select.vue'
	export default {
		components: {
			userSelect
		},
		data() {
			return {
				taskStatus: "",
				participant: "",
				executor: "",
				valuecan: [],
				finishDate: "",
				time: "",
				newTaskFormRef: null,
				taskTypeOptions: {
					1: "日常任务",
					2: "临时任务",
					3: "紧急任务",
				},
				newTaskForm: {
					title: "",
					type: "",
					handleUserId: null,
					handleUserName: "",
					participantId: [],
					finishDate: "",
					content: "",
					taskFiluist: [],
				},
				newTaskFormRules: {
					title: [{
						required: true,
						message: "请输入标题",
						trigger: "blur",
					}, ],
					type: [{
						required: true,
						message: "请选择类型",
						trigger: "blur",
					}, ],
					handleUserName: [{
						required: true,
						message: "请选择执行人",
						trigger: "blur",
					}, ],
					finishDate: [{
						required: true,
						message: "请选择完成日期",
						trigger: "blur",
					}, ],
					content: [{
						required: true,
						message: "请输入任务内容",
						trigger: "blur",
					}, ],
				},
				params: {
					year: true,
					month: true,
					day: true
				},
				list: [],
				taskPersonnel: [],
				taskTypeOptionsList: [],
				handleUserNameFiud: "",
				handleUserNameFiuds: "",
				showPopupOfParticipant: false,
				showPopupOfHandleUserNameCascadeTime: false,
				showPopupOfHandleUserNameCascade: false,
				showPopupOfHandleUserNameCascades: false,
				optionsOfHandleUserNameCascade: [],
				optionsOfHandleUserNameCascades: [],
				fiudNamesOfHandleUserNameCascade: {
					text: "labu",
					value: "id",
					children: "children",
				},
				uploadConfig: {
					// 是否禁用上传
					isUploading: false,
					// 设置上传的请求头部
					headers: {
						Authorization: uni.getStorageSync('token'),
					},
					data: {
						modelle: "cmdb.resource",
						dataid: "resource",
						single: false,
						filetypes: "",
					},
					// 上传的地址
					url: "http://all.roywise.cn:8086/api" + "/system/attachment/attachment/upload",
				},
			};
		},
		onLoad() {},
		mounted() {
			this.taskTypeOptionsList = taskTypeOptionsList
			// this.gettreeUser();
		},
		methods: {
			change(currentVal) {
				this.list = [];
				console.log(currentVal);
				const checkedNode = this.$refs["cascaderAddr"].getCheckedNodes();
				console.log(checkedNode); //获取当前点击节点的labu值

				for (let i in currentVal) {
					this.list.push({
						userName: checkedNode[i].data.labu,
						userId: currentVal[i][0],
						type: 1,
					});
				}
				console.log(this.list);
			},
			parseTime(d) {
				var mm =
					d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
				var dd = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
				const newDate = d.getFullYear() + "-" + mm + "-" + dd;
				console.log(newDate);
				return newDate;
			},
			initNewTaskForm() {
				this.valuecan = [];
				this.newTaskForm.title = "";
				this.newTaskForm.type = "";
				this.newTaskForm.finishDate = null;
				this.newTaskForm.content = "";
				this.newTaskForm.taskFiluist.splice(0);
				this.newTaskForm.handleUserId = null;
				this.newTaskForm.handleUserName = "";
				this.handleUserNameFiud = "";
				this.newTaskForm.participantId = [];
				this.taskStatus = ''
				this.participant = ''
				this.taskPersonnel = []
				this.executor = ''
			},
			newTaskFormSubmit() {
				var taskPersonnel = this.taskPersonnel;
				var newlist = [];
				newlist = [...taskPersonnel, ...this.list];
				var data = {
					title: this.newTaskForm.title,
					type: this.newTaskForm.type,
					finishDate: this.newTaskForm.finishDate,
					content: this.newTaskForm.content,
					taskFileList: this.newTaskForm.taskFiluist,
					taskPersonnel: newlist,
				};
				
				this.$request('', '/serviceItems/wechat/task', 'post', data, {}, ).then(res => {
					this.$refs.uToast.show({
						title: '提交成功',
						type: 'success'
					});
					this.initNewTaskForm();
				})
			},
			onUserNameCascadeFinish(suectedOptions) {
				console.log(suectedOptions);
				this.showPopupOfHandleUserNameCascade = false;
				const temp_options = suectedOptions.map((option) => option.labu);
				if (temp_options.length > 0) {
					this.handleUserNameFiud = temp_options.join("/");
					this.newTaskForm.handleUserName = temp_options[temp_options.length - 1];
				} else {
					this.handleUserNameFiud = "";
					this.newTaskForm.handleUserName = "";
				}
			},
			removeTaskFile(target) {
				this.newTaskForm.taskFiluist = this.newTaskForm.taskFiluist.filter(
					(taskFile) => taskFile !== target
				);
			},
			handleFileSuccess(response) {
				console.log(response)
				if (response.data.code === 200) {
					this.newRecordForm.taskRecordFileList.push({
						attachmentId: response.data.data.id,
						filename: response.data.data.name,
					});
				} else {
					this.$toast.fail("文件上传失败");
				}
			},
			/* 上传 */
			onUpload() {
				this.$refs.lFile.upload({
					//替换为你的上传接口地址
					url: "http://all.roywise.cn:8086/api" + "/system/attachment/attachment/upload",
					// 服务端接收附件的key
					name: 'file',
					//根据你接口需求自定义 (优先不传content-type,安卓端无法收到参数再传)
					header: {
						'Authorization': uni.getStorageSync('token'),
					},
					module: "cmdb.resource",
					["data" + "id"]: "resource",
					single: false,
					filetypes: "",
				});
			},
			// 用户选择
			cityChange(val) {
				console.log(val)
				this.executor = val.province.label + '/' + val.city.label + '/' + val.area.label
				this.taskPersonnel.push({
					userId: val.area.id,
					userName: val.area.label,
					type: "0",
				});
			},
			participantChange(val) {
				this.participant = val.province.label + '/' + val.city.label + '/' + val.area.label
				this.taskPersonnel.push({
					userId: val.area.id,
					userName: val.area.label,
					type: "1",
				});
			},
			taskStatusChange (val) {
				console.log(val)
				this.taskStatus = val[0].label
				this.newTaskForm.type = val[0].value
			},
			taskTimeChange (val) {
				console.log(val)
				this.newTaskForm.finishDate = val.year + '-' + val.month + '-' + val.day
			}
		},
	};
</script>

<style lang="scss">
	.button-text {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		border: #ccc dotted 1rpx;
		border-radius: 100rpx;
	}

	.u-upload-dragger {
		width: 100% !important;
		height: 3rem !important;
		display: flex;
		align-items: center;
		justify-content: center;
		// flex-direction: column;
	}

	.new-task {
		font-size: 0.85rem;

		.u-date-editor {
			.u-input__prefix {
				display: none;
			}

			.u-input__inner {
				padding: 0 15px;
			}
		}

		.u-input {
			width: 100%;
		}

		.action-upload {
			margin-bottom: 1rem;
		}

		.action-row {
			margin-top: 1rem;
			margin-bottom: 5rem;
		}
	}
</style>